<template>
  <div class="module-item-course" style="margin-top:0">
    <div
      :style="'padding-top:' + module.base.paddingTop + 'px;padding-bottom:' + module.base.paddingBottom + 'px;margin-top:' + module.base.marginTop + 'px;margin-bottom:' + module.base.marginBottom + 'px;'">
      <div class="item-course-con" :style="style" :class="'item-course-display__'+module.base.display">
        <moduleBg :base="module.base" />
        <moduleTitle v-if="module.title.title.show" :title="module.title" />
        <div class="item-course" :class="'style'+module.base.column">
          <template v-if="module.base.source=='auto'">
            <div class="item">
              <div class="pic">
                <img :src="$util.icon('img.jpg')" alt="">
              </div>
              <div class="c">
                <div v-if="module.base.text.show" class="tit">
                  <moduleText :text="module.base.text" name="此处显示课程名称" />
                </div>
                <div v-if="module.base.sjg || module.base.sgm" class="price">
                  <template v-if="module.base.sjg">
                    <span>
                      <b>￥999</b>
                      <i>￥1000</i>
                    </span>
                  </template>
                  <template v-if="module.base.sgm">
                    <label>立即购买</label>
                  </template>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="pic">
                <img :src="$util.icon('img.jpg')" alt="">
              </div>
              <div class="c">
                <div v-if="module.base.text.show" class="tit">
                  <moduleText :text="module.base.text" name="此处显示课程名称" />
                </div>
                <div v-if="module.base.sjg || module.base.sgm" class="price">
                  <template v-if="module.base.sjg">
                    <span>
                      <b>￥999</b>
                      <i>￥1000</i>
                    </span>
                  </template>
                  <template v-if="module.base.sgm">
                    <label>立即购买</label>
                  </template>
                </div>
              </div>
            </div>
          </template>
          <template v-if="module.base.source=='choice'">
            <div v-for="(item, index) in module.list" :key="index" class="item"
              @click="$util.openAttr(module.list,index)">
              <div class="pic">
                <img :src="item.cm.image" alt="">
              </div>
              <div class="c">
                <div v-if="module.base.text.show" class="tit">
                  <moduleText :text="module.base.text" :name="item.cm.name" />
                </div>
                <div v-if="module.base.sjg || module.base.sgm" class="price">
                  <template v-if="module.base.sjg">
                    <span>
                      <b>￥{{ item.cm.price }}</b>
                      <i v-if="item.cm.original_price">￥{{ item.cm.original_price }}</i>
                    </span>
                  </template>
                  <template v-if="module.base.sgm">
                    <label v-if="item.cm.quantity > 0">立即购买</label>
                    <label v-if="item.cm.quantity <= 0" style="background:#aaa">已抢完</label>
                  </template>
                </div>
              </div>
              <template v-if="module.base.is_binding">
                <div class="settechnical">选择{{lang.technical}}</div>
              </template>
              <template v-else>
                <div class="settechnical">详情</div>
              </template>
            </div>
            <div v-if="module.list.length == 0" class="noadd">
              <el-button type="primary" size="mini" icon="el-icon-plus" @click="addCourse">添加课程</el-button>
            </div>
          </template>
        </div>
      </div>
    </div>
    <!--添加课程弹窗-->
    <SelectCourse :show.sync="showSelectCourse" size="mini" />
  </div>
</template>

<script>
  import moduleBg from '@/views/diypage/module/bg.vue'
  import moduleText from '@/views/diypage/module/text.vue'
  import SelectCourse from '@/views/diypage/attr/selectCourse.vue'
  export default {
    components: {
      moduleBg,
      moduleText,
      SelectCourse
    },
    props: ['module'],
    data() {
      return {
        lang: {},
        showSelectCourse: false
      }
    },
    mounted() {
      this.$api.post('/Lang/getlang').then(res => {
        this.lang = res.data
      })
    },
    computed: {
      style() {
        if (this.module.base.fc != '') {
          return `color:${this.module.base.fc}`
        } else {
          return ''
        }
      }
    },
    methods: {
      showtime(item) {
        const time = item.endTime - item.startTime
        if (time < 0) {
          return '活动已结束'
        }
        const re = this.$util.timeformat(time)
        return `${re.day}天${re.hour}时${re.minute}分${re.second}秒`
      },

      addCourse() {
        if (!this.$parent.prev) {
          this.showSelectCourse = true
        }
      }

    }
  }
</script>
